<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <link rel="stylesheet" href="./index.css">
</head>


<body>
  <ul id="wrapper">

  </ul>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  <script>

    // .item 每个订单 样式
    // .log_wrapper 每个物流信息的容器样式
    // .item_img 商品图片样式
    // .logistics 查看物流信息样式
    // .item_details 订单文字详情样式
    // .name 商品名
    // .target_site 收货地址
    // .price 价格
    // .time 订单时间
    // .log_box 每条物流信息的包裹
    // .log_item 每条物流信息时间
    // .log_icon 物流信息图片
    
    $(document).ready(function () {
      var $Ul = $('#wrapper');
      $.ajax({
        url: 'http://api.fgdemoshow.cn/api/login',
        type: 'POST',
        data: {
          username: 'dafeige',
          password: 123456
        },
        xhrFields: {
          withCredentials: true
        },
        success: function (res) {
          if (res.status === 1) {
            $.ajax({
              url: 'http://api.fgdemoshow.cn/api/getIndent',
              type: 'GET',
              xhrFields: {
                withCredentials: true
              },
              success: function (res) {
                if (res.status === 1) {
                  $.each(res.data, function (index, ele) {
                    var $ItemLi = $('<li class="item"></li>');
                    var $Img = $('<img class="item_img" src=' + ele.imgUrl + ' />');
                    var $Details = $(`<div class="item_details">
                      <p class="name"> ${ele.name} </p>
                      <p class="target_site">收货地址：${ele.targetSite}</p>
                      <p class="price"> <span>价格：</span> <span>${ele.price} x ${ele.num}</span></p>
                      <p class="time"> 下单时间：${ele.createdAt} </p>
                    </div>`);
                    var $Btn = $('<div class="logistics"> 查看物流 <p class="iconfont btn icon-xia"></p></div>');
                    $Btn.data('id', ele.ordersId);
                    var $LogWrapper = $('<div class="log_wrapper"></div>');
                    $Ul.append($ItemLi).append($LogWrapper);
                    $ItemLi.append($Img).append($Details).append($Btn);
                  });
                  var isShow = [];

                  $('.logistics').each(function (index, item) {
                    isShow[index] = false;
                    $(item).click(function () {
                      var id = $(this).data('id');
                      console.log(id);
                      if (isShow[index]) {

                        $('.log_wrapper').eq(index).hide('slow');
                        $('.logistics').children().removeClass('icon-top').addClass('icon-xia');
                        $('.log_wrapper').eq(index).children().remove('.log_item');
                        isShow.forEach(function (item, j) {
                          isShow[j] = false;
                        })
                      } else {
                        $.ajax({
                          url: 'http://api.fgdemoshow.cn/api/getLogistics?id=' + id,
                          type: 'GET',
                          xhrFields: {
                            withCredentials: true
                          },
                          success: function (res) {
                            if (res.status === 1) {
                              var data = JSON.parse(res.data.logistics);
                              $.each(data, function (i, ele) {
                                var $LogItem = $(`<div class="log_item">
                                  <div>${ele.time}</div>
                                  <img class="log_icon" src="./imgs/2.png" />
                                  <div>${ele.site}</div>
                                </div>`)
                                $('.log_wrapper').eq(index).append($LogItem);
                              });
                              $('.log_wrapper').eq(index).show('slow');
                              $('.log_wrapper').eq(index).siblings('.log_wrapper').hide('slow');
                              $('.log_wrapper').eq(index).siblings('.log_wrapper').children().remove('.log_item');
                              isShow.forEach(function (item, j) {
                                if (index === j) {
                                  isShow[j] = true;
                                  $('.logistics').eq(j).children().removeClass('icon-xia').addClass('icon-top');
                                } else {

                                  $('.logistics').children().eq(j).removeClass('icon-top').addClass('icon-xia');
                                  isShow[j] = false;
                                }
                              });
                            } else {
                              alert(res.msg);
                            }
                          }
                        })
                      }
                    });
                  });
                } else {
                  alert(res.msg);
                }
              }
            })
          } else {
            alert(res.msg);
          }
        }
      })
    })
  </script>
</body>

</html>